<template>
	<Root>
		<div class="complain">
			<div class="card">
				<div class="title border">投诉类型</div>
				<u-radio-group v-model="formData.complaintType" shape="button" activeColor="#5760ed" inactiveColor="#f1f1f1" :plain="false">
					<u-radio :customStyle="{marginRight: '16rpx'}" label="卫生问题" :name="1"></u-radio>
					<u-radio label="服务态度" :name="2"></u-radio>
					<u-radio label="其它" :name="3"></u-radio>
				</u-radio-group>
			</div>
			<div class="card">
				<div class="title">事发位置</div>
				<div class="mb10">
					<u--textarea v-model="formData.addr"backgroundColor="#fbfbfb" placeholder="请输入事发位置" count ></u--textarea>
				</div>
				<div class="title">联系方式</div>
				<u--input
					type="digit"
					placeholder="请输入手机号码"
					v-model="formData.phone"
				></u--input>
			</div>
			<div class="card">
				<div class="title">投诉建议</div>
				<u--textarea v-model="formData.remark"backgroundColor="#fbfbfb" placeholder="请输入投诉建议" count ></u--textarea>
			</div>
			<div class="card">
				<div class="title">上传图片</div>
				<u-upload
				    :fileList="fileList"
						:previewFullImage="true"
						:multiple="false"
				    @afterRead="afterRead"
				    @delete="deletePic"
				    :maxCount="10"
				  ></u-upload>
			</div>
			<u-button @click="submitForm" :loading="loading" class="btn" color="#5760ed" size="large" :plain="true" text="确认提交"></u-button>
		</div>
	</Root>
</template>

<script setup>
import { ref, computed } from 'vue'
import { baseUrl } from '/http/request.js'
import { submitComplaintInfo } from '/http/api.js'
	
const projectId = computed(() => uni.getStorageSync('projectId'))
const loading = ref(false)
const formData = ref({
	complaintType: 1,
	remark: '',
	addr: '',
	phone: '',
})
const fileList = ref([])

const afterRead = (e) => {
	let fileListLen = fileList.value.length;
	fileList.value[fileListLen] = {
		...e.file,
		status: "uploading",
		message: "上传中",
	}
	uni.uploadFile({
		url: `${baseUrl}/file/upload`,
		file: e.file,
		name: 'file',
		filePath: e.file.url,
		header: {
			'Authorization': `Bearer ${uni.getStorageSync('token')}`
		},
		success(res) {
			const resDataStr = res.data || null
			if(resDataStr) {
				const resData = JSON.parse(resDataStr)
				if(resData.code == 200) {
					fileList.value[fileListLen].status = 'success'
					fileList.value[fileListLen].url = resData.data.url
				} else {
					uni.showToast({ title: resData.msg, icon: 'none' })
					fileList.value[fileListLen].status = 'error'
				}
			}
		},
		fail(res) {
			console.log('upload fail', res);
		}
	})
}

const deletePic = (e) => {
	formData.value.fileList.splice(e.index, 1)
}

const submitForm = async () => {
	if(!formData.value.phone || formData.value.phone.length != 11) {
		return uni.showToast({
			title: '请输入11位的手机号码',
			icon:'none'
		})
	}
	if(!formData.value.addr) {
		return uni.showToast({
			title: '请输入事发位置',
			icon:'none'
		})
	}
	if(!formData.value.remark) {
		return uni.showToast({
			title: '请输入投诉建议',
			icon:'none'
		})
	}
	try {
		const data = {
			projectId: projectId.value,
			...formData.value,
			imgUrl: fileList.value.length ? fileList.value.map(v => v.url).join(',') : ''
		}
		loading.value = true
		await submitComplaintInfo(data)
		loading.value = false
		uni.showToast({
			title: '已提交',
			icon:'none'
		})
		setTimeout(() => {
			uni.navigateBack()
		}, 1000)
	} catch (error) {
		loading.value = false
		//TODO handle the exception
		console.log(error);
	}
}
</script>

<style lang="scss">
.complain{
	height: 100%;
	background-color: #f5f6fa;
	padding: 24rpx;
	box-sizing: border-box;
	padding-bottom: 100rpx;
	.btn{
		margin-top: 100rpx;
	}
	.mb10{
		margin-bottom: 20rpx;
	}
	.card{
		border-radius: 16rpx;
		background-color: #fff;
		padding: 24rpx;
		box-sizing: border-box;
		margin-bottom: 30rpx;
		.title{
			font-size: 34rpx;
			font-weight: 800;
			margin-bottom: 20rpx;
		}
		.border{
			padding-bottom: 14rpx;
			border-bottom: 1px solid #efefef;
		}
		.img-wrapper{
			display: flex;
			align-items: center;
			.icon{
				width: 80rpx;
				height: 80rpx;
				margin-right: 16rpx;
			}
		}
	}
}       
</style>
